<!--
 * @Description: 悟空软件
 * @Author: 悟空
 * @LastEditors: yang
-->
<template>
  <div>
    <div style="display: flex;">
<!--      <div class="title">HRM工作台</div>-->
      <div>
<!--        <el-radio-group @change="radioChange()" v-model="type" style="margin-top: 10px;margin-left: 20px;">-->
<!--          <el-radio v-for="(item, index) in totalType == 1 ? queryUserType : queryDeptType" :key="index" :label="item.value" class="el-radio&#45;&#45;type">-->
<!--            {{ item.label }}-->
<!--          </el-radio>-->
<!--        </el-radio-group>-->
<!--        <el-switch-->
<!--            @change="switchChange()"-->
<!--            style="margin-top: 10px;margin-left: 20px;"-->
<!--            v-model="totalType"-->
<!--            :active-value="2"-->
<!--            :inactive-value="1"-->
<!--            active-text="机构"-->
<!--            inactive-text="人员">-->
<!--        </el-switch>-->
      </div>
    </div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 10px">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbs">
        <a
          @click="breadcrumbClick(item,index)" style="font-size: 20px;text-align: center">{{ item.name }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <flexbox
      class="workbench"
      align="stretch">

      <div class="workbench__left">
        <!--        <wb-personnel />-->
        <!--        <wb-recruit />-->
        <!--        <wb-salary />-->
        <!-- <wb-performance /> -->

        <wb-dept-total v-loading="loading" :orgId="orgId" :kind="kind" :totalData="totalData" :query="query"
                       @click-legend="clickLegend" :totalType="totalType" :statisType="type"
                       :typeOptions="totalType == 1 ? queryUserType : queryDeptType"
                       :deepStack="breadcrumbs" @goBackOrg="goBackOrgHandle"
                       @staticsTypeChange="staticsTypeChange" @totalTypeChange="totalTypeChange"
                       @click-work="clickWork" @click-age="clickAge"
        />
        <wb-emp-total v-loading="loading" :query="query" :totalData="totalData"
                      @click-edu="clickEdu" @click-major="clickMajor" @click-technology="clickTechnology"
        />
      </div>

<!--      <div class="workbench__right">-->
<!--        <wb-backlog/>-->
<!--        <wb-calendar/>-->
<!--      </div>-->
    </flexbox>

    <!--  导出  -->
    <el-dialog title="员工列表"
               :visible.sync="employeeOpen"
               width="50%"
               v-if="employeeOpen"
               append-to-body
               element-loading-text="拼命加载中"
    >
      <el-table v-loading="employeeLoading" :data="employeeList">
        <el-table-column show-overflow-tooltip label="姓名" align="center" prop="employeeName"/>
        <el-table-column show-overflow-tooltip label="性别" align="center" prop="sex" :formatter="sexFormatter"/>
        <el-table-column show-overflow-tooltip label="任职机构" align="center" prop="org"/>
        <el-table-column show-overflow-tooltip label="任职部门" align="center" prop="dept"/>
        <el-table-column show-overflow-tooltip label="职务" align="center" prop="jobTitle"/>
        <el-table-column show-overflow-tooltip label="职位层级" align="center" prop="jobLevel"/>
        <el-table-column show-overflow-tooltip label="政治面貌" align="center" prop="polId"/>
        <el-table-column show-overflow-tooltip label="在岗状态" align="center" prop="postStatus"/>
        <el-table-column show-overflow-tooltip label="用工形式" align="center" prop="workForms"/>
        <el-table-column show-overflow-tooltip label="手机" align="center" prop="mobile"/>
        <el-table-column show-overflow-tooltip label="身份证号" align="center" prop="idNumber"/>
      </el-table>
      <div class="p-contianer">
        <el-pagination :current-page="queryParams.page" :page-sizes="pageSizes" :page-size.sync="queryParams.limit" :total="total"
                       class="p-bar" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </el-dialog>

  </div>
</template>

<script>
import WbPersonnel from '../components/WbPersonnel'
import WbRecruit from '../components/WbRecruit'
import WbBacklog from '../components/WbBacklog'
import WbSalary from '../components/WbSalary'
import WbDeptTotal from '../components/WbDeptTotal'
import WbEmpTotal from '../components/WbEmpTotal'
// import WbPerformance from '../components/WbPerformance'

import WbCalendar from '../components/WbCalendar'
import {
  hrmWorkbenchTotalAPI,
  hrmWorkbenchEmployeeListAPI,
} from '@/api/hrm/employee'

export default {
  // 工作台
  name: 'ManagerWorkbench',
  components: {
    WbDeptTotal,
    WbEmpTotal,
    WbPersonnel,
    WbRecruit,
    WbSalary,
    // WbPerformance,

    WbBacklog,
    WbCalendar
  },
  props: {},
  data() {
    return {
      pageSizes: [15, 30, 60, 100],
      queryParams: {
        page: 1,
        limit: 15,
      },
      total: 0,
      employeeList: [],
      employeeOpen: false,
      employeeLoading: false,
      queryUserType: [{ value: 3, label: '所有人数'}, { value: 1, label: '报表企业人数'}, { value: 2, label: '报表及托管'}],
      queryDeptType: [{ value: 3, label: '企业类别'}, { value: 1, label: '单位分级'}, { value: 2, label: '报表及托管'}],
      query: false,
      loading: false,
      breadcrumbs: [{name: '南昌市政公用集团有限公司', orgId: "0", kind: "0"}],
      orgId: "0",
      kind: "0",
      type: 3,
      //1-人员，2-机构
      totalType: 1,
      totalData: {},
    }
  },
  computed: {},
  watch: {},
  beforeMount() {
    // _isMounted是当前实例mouned()是否执行 此时为false
    window.parentMounted = this._isMounted
  },
  async mounted() {
    this.totalData = await this.getDashboardTotal();
    // _isMounted是当前实例mouned()是否执行 此时为true
    window.parentMounted = this._isMounted
  },

  beforeDestroy() {
  },
  methods: {
    /**
     * 更改当前页数
     */
    handleCurrentChange(val) {
      this.queryParams.page = val
      this.getEmployeeList()
    },

    /**
     * 更改每页展示数量
     */
    handleSizeChange(val) {
      this.queryParams.limit = val
      this.getEmployeeList()
    },

    /** 性别格式化 */
    sexFormatter(row){
      if (row.sex == 1){
        return '男';
      }else if (row.sex == 2){
        return '女';
      }
      return row.sex;
    },

    /** 查询隐患点表单管理列表 */
    getEmployeeList() {
      this.employeeLoading = true;
      hrmWorkbenchEmployeeListAPI(this.queryParams).then(response => {
        this.employeeList = response.data.list;
        this.total = response.data.totalRow;
        this.employeeLoading = false;
      }).catch(() => {
      });
    },

    /** 初始化查询参数 */
    queryParamsInit(){
      this.queryParams = {
        page: 1,
        limit: 15,
        totalType: this.kind,
        deptId: this.orgId,
        dimension: this.totalType,
        type: this.type,
      }
    },

    /**
     * 从业人员期末人数
     */
    async clickWork(node){
      this.employeeOpen = true;
      this.queryParamsInit();
      this.queryParams.workForms = node.name;
      this.getEmployeeList();
    },

    /**
     * 年龄层次
     */
    async clickAge(node){
      this.employeeOpen = true;
      this.queryParamsInit();
      if (node.name == '≤35') {
        this.queryParams.age = [null, 35];
      }else if (node.name == '36-40') {
        this.queryParams.age = [35, 40];
      }else if (node.name == '41-45'){
        this.queryParams.age = [40, 45];
      }else if (node.name == '46-50'){
        this.queryParams.age = [45, 50];
      }else if (node.name == '51-55'){
        this.queryParams.age = [50, 55];
      }else if (node.name == '>55'){
        this.queryParams.age = [55, null];
      }
      this.getEmployeeList();
    },

    /**
     * 学历层次
     */
    async clickEdu(eduName){
      this.employeeOpen = true;
      this.queryParamsInit();
      if (eduName == '博士'){
        this.queryParams.highestEducation = 8;
      }else if (eduName == '硕士'){
        this.queryParams.highestEducation = 7;
      }else if (eduName == '大学'){
        this.queryParams.highestEducation = 6;
      }else if (eduName == '专科'){
        this.queryParams.highestEducation = 5;
      }else if (eduName == '中专'){
        this.queryParams.highestEducation = 4;
      }else if (eduName == '高中及以下'){
        this.queryParams.highestEducation = 3;
      }
      this.getEmployeeList();
    },

    /**
     * 专业
     */
    async clickMajor(node){
      this.employeeOpen = true;
      this.queryParamsInit();
      this.queryParams.major = node.name.slice(0, node.name.indexOf("("));
      this.getEmployeeList();
    },

    /** 技能人才 */
    async clickTechnology(node) {
      this.employeeOpen = true;
      this.queryParamsInit();
      this.queryParams.technology = node;
      this.getEmployeeList();
    },

    /**
     * 切换类型
     */
    async switchChange() {
      this.breadcrumbs = [{name: '南昌市政公用集团有限公司', orgId: "0", kind: "0"}];
      this.type = 3;
      this.orgId = "0";
      this.kind = "0";
      this.totalData = await this.getDashboardTotal();
      this.query = !this.query;
    },

    /**
     * 改变类型
     */
    async radioChange() {
      this.totalData = await this.getDashboardTotal();
      this.query = !this.query;
    },

    /**
     * 点击面包屑
     */
    async breadcrumbClick(item, index) {
      if (index == this.breadcrumbs.length - 1 || this.totalType == 2) {
        return;
      }
      this.breadcrumbs.splice(index + 1, this.breadcrumbs.length - index - 1)
      this.orgId = item.orgId;
      this.kind = item.kind;
      this.totalData = await this.getDashboardTotal();
      this.query = !this.query;
    },
    goBackOrgHandle() {
      let index = this.breadcrumbs.length - 2
      this.breadcrumbClick(this.breadcrumbs[index], index)
    },
    staticsTypeChange(val) {
      this.type = val
      this.radioChange()
    },
    totalTypeChange(val) {
      this.totalType = val
      this.switchChange()
    },
    /**
     * 点击图例
     */
    async clickLegend(node) {
      if (!node) return;
      this.orgId = node.orgId;
      this.kind = node.kind;
      if (this.kind != -1) {
        this.totalData = await this.getDashboardTotal();
        const index = this.breadcrumbs.findIndex(item => {
          node.name == item.name && node.orgId == item.orgId && node.kind == item.kind
        })
        if (index < 0) {
          var resolve = node.name.substring(0, node.name.indexOf("("));
          this.breadcrumbs.push({name: resolve, orgId: node.orgId, kind: node.kind});
        }
        this.query = !this.query;
      }
    },

    //仪表盘统计
    async getDashboardTotal() {
      this.loading = true;
      let data = await hrmWorkbenchTotalAPI(this.orgId, this.kind, this.type, this.totalType).then(async res => {
        this.loading = false;
        return res.data;
      }).catch(() => {
      });
      return data;
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 24px;
  line-height: 28px;
  color: $--color-text-primary;
}

.workbench {
  padding-bottom: 40px;
  margin-top: 16px;

  &__left {
    flex: 1;
    flex-shrink: 0;
    min-width: 700px;
  }

  &__right {
    flex-shrink: 0;
    width: 450px;
    margin-left: 15px;
  }

  .el-card + .el-card,
  .statistics-card + .statistics-card {
    margin-top: 15px;
    border-top: none;
  }

  ::v-deep .statistics-card {
    border: 0;
    //box-shadow: $--box-shadow-bottom-light;
  }
}
</style>
